import 'package:flutter/material.dart';

class FormDemo extends StatelessWidget {
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Form Demo"),
        elevation: 0.0,
      ),
      body: Theme(
        data: ThemeData(
          primaryColor: Colors.green,
        ),
        child: Container(
          padding: EdgeInsets.all(16.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              RegisterForm()
            ],
          ),
        ),
      ),
    );
  }
}

class RegisterForm extends StatefulWidget {
  RegisterForm({Key key}) : super(key: key);

  @override
  _RegisterFormState createState() => _RegisterFormState();
}

class _RegisterFormState extends State<RegisterForm> {

  final registerFormKey = GlobalKey<FormState>();
  // 保存用户名和密码的值
  String username, password;

  void submitRegisterForm() {
    // 保存 Form 中填写的数据
    registerFormKey.currentState.save();
    // 验证表单数据
    registerFormKey.currentState.validate();

    debugPrint("username: $username -- password: $password");

    Scaffold.of(context).showSnackBar(
      SnackBar(
        content: Text("注册中..."),
      ),
    );
  }

  String validateUsername(value) {
    if (value.isEmpty) {
      return "用户名不能为空";
    }
    return null;
  }

  String validatePassword(value) {
    if (value.isEmpty) {
      return "密码不能为空";
    }
    return null;
  }

  @override
  Widget build(BuildContext context) {
    return Form(
      key: registerFormKey, // 用户获取表单输入的数据
      child: Column(
        children: [
          TextFormField(
            decoration: InputDecoration(
              labelText: "用户名",
              icon: Icon(Icons.person),
              helperText: '',
            ),
            validator: validateUsername,
            onSaved: (value) {
              username = value;
            },
          ),
          TextFormField(
            obscureText: true,
            decoration: InputDecoration(
              labelText: "密码",
              icon: Icon(Icons.lock),
              helperText: '',
            ),
            validator: validatePassword,
            onSaved: (value) {
              password = value;
            },
          ),
          SizedBox(height: 32.0,),
          Container(
            width: double.infinity,
            child: RaisedButton(
              color: Colors.green,
              // color: Theme.of(context).accentColor,
              child: Text("立即注册", style: TextStyle(color: Colors.white),),
              onPressed: submitRegisterForm,
            ),
          ),
        ],
      ),
    );
  }
}

class TextFieldDemo extends StatefulWidget {
  TextFieldDemo({Key key}) : super(key: key);

  @override
  _TextFieldDemoState createState() => _TextFieldDemoState();
}

class _TextFieldDemoState extends State<TextFieldDemo> {

  // 文字编辑控制器
  final textEditingController = TextEditingController();

  @override
  void dispose() {
    super.dispose();
    textEditingController.dispose();
  }

  @override
  void initState() {
    super.initState();
    // 设置文本框的初始值
    textEditingController.text = "admin";
    // 监听文本框输入
    textEditingController.addListener(
      () { 
        debugPrint("input: ${textEditingController.text}");
      }
    );
  }

  @override
  Widget build(BuildContext context) {
    return TextField(
      controller: textEditingController,
      // onChanged: (value) => debugPrint("input $value"),
      onSubmitted: (value) => debugPrint("submit $value"), // 键盘输入确定按键指定的事件
      decoration: InputDecoration(
        icon: Icon(Icons.person),
        labelText: "用户名",
        hintText: "请输入用户名",
        // border: InputBorder.none,
        // border: OutlineInputBorder(),
        filled: true, // 设置文本框背景颜色，默认为灰色
        fillColor: Colors.green[100].withOpacity(0.3), // 修改文本框默认的背景颜色
      ),
    );
  }
}

class ThemeDemo extends StatelessWidget {
  
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Theme.of(context).primaryColor,
      child: null,
    );
  }
}